.map-top-bar {
  .q-scrollarea__content {
    height: 3.25rem;
    overflow-y: hidden;

    .q-btn {
      max-width: 8rem;
      min-width: 5rem !important;
    }
  }
}

.making-map-page {
  .left-maps {
    z-index: 1;
    width: 6.25rem;
  }

  .left-points {
    width: 12.5rem;

    .map-points-tabs {
      .q-tab__content {
        min-width: 0;
        padding: .125rem 0;
      }

      .q-tab__label {
        font-size: .8125rem;
      }

      .q-tabs__arrow {
        font-size: 1.25rem;
        min-width: 1.25rem;
      }

      .q-tabs__arrow--left {
        left: -.3125rem;
      }

      .q-tabs__arrow--right {
        right: -.3125rem;
      }
    }

    .active-cls {
      color: var(--q-primary);
      background-color: #DCEFEA !important;
    }

    .point-list-box {
      max-height: 100%;
    }

    .q-item__section--side > .q-icon {
      font-size: 1.25rem;
    }

    .point-box-cls {
      padding-top: .375rem;
      padding-bottom: 1.125rem;

      &:hover {
        opacity: .8;
      }
    }

    .point-name-cls {
      position: absolute;
      left: -10%;
      right: -10%;
      bottom: .03rem;
      font-size: .75rem;
      transform: scale(.74);
    }
  }
}

.map-warning-tips-icon {
  position: relative;
  top: -.075rem;
}

.point-list-box::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.konva-map {
  .map-operation-bar {
    top: .75rem;
    left: .75rem;
    z-index: 1;

    .q-btn {
      font-size: .815rem;
      line-height: 1.2rem;
      min-width: 3rem !important;
    }

    .q-btn__content {
      position: relative;
      top: .12rem;

      .q-icon {
        font-size: .875rem;
      }
    }

    .drop-down-badge {
      position: absolute;
      right: -.85rem;
      bottom: -.15rem;
      font-size: 15px;
      transform: rotate(45deg);
    }
  }

  .pointer-tips {
    white-space: nowrap;
  }

  .map-right-menu {
    min-width: 80px;
    z-index: 1;

    .disabled, [disabled] {
      color: #BBB;
    }

    .q-item {
      min-height: 28px;
    }
  }

  canvas {
    transform: translateZ(0);
  }

  .map-canvas, .map-monitor, .scene-maps-canvas {
    transform: translateZ(0);
    //background-color: #E8E9F0;
    background-position: -1px -1px;
    background-image: url('src/assets/CANVAS-BG.png');
  }

  .map-zoom-tool-cls {
    position: absolute;
    z-index: 5;
    top: $space-base * .5;
    right: $space-base;

    .q-slider {
      z-index: 2;
      width: 9rem;
    }

    .q-slider:nth-last-of-type(even) {
      z-index: 1;
    }
  }

  .map-tips {
    z-index: 5;
    left: 12px;
    bottom: 4px;
  }

  .map-icons {
    z-index: 5;
    right: 8px;
    bottom: 8px;

    .q-btn {
      width: 1.8rem;
      height: 1.8rem;
    }

    &-search {
      .q-icon {
        font-size: 1.5rem;
      }
    }

    &-info {
      .q-icon {
        font-size: 1.4rem;
      }
    }

    &-scale {
      font-size: .95rem;
    }
  }
}

.map-search-box {
  width: 8.5rem;
  height: 1.8rem;

  .end-search-input,
  .start-search-input {
    height: 1.2rem;
    font-size: 12px;
    border-color: transparent;
  }

  .map-search-dot {
    padding-right: 2px;
  }

  input[type="number" i] {
    padding: 0;
  }

  :focus-visible {
    outline: none;
  }

  /* 在Chrome浏览器下 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  /* 在Firefox浏览器下 */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

.curve-form-cls {
  width: 18.75rem;
}

.scene-maps-side {
  transition: left .3s ease-in-out;

  &-shrink {
    right: 0;
    bottom: 3rem;
    height: 5rem;
    transform: translateX(60%);
  }
}

.map-monitor-agv-panel {
  transition: right .3s ease-in-out;

  .q-scrollarea__thumb {
    z-index: 10;
  }
}

.map-monitor-rack-panel, .map-monitor-alarm-area-panel {
  transition: left .3s ease-in-out;
}

.map-monitor-shrink {
  top: 50%;
  z-index: 1;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 100%;
}